import React, { Component } from "react";
import { http } from "../../api/index";
import moment from "moment";
import { baseURL } from "../../api/ajax";
import mobxdata from "../../mobx/data";
import {
  Table,
  Popconfirm,
  Button,
  Tag,
  Modal,
  Form,
  Input,
  Avatar,
  DatePicker,
  TreeSelect,
  Switch,
  message,
} from "antd";
const { TextArea } = Input;
export default class AnnounceList extends Component {
  state = {
    annoList: [],
    isModalVisible: false,
    updateVisible: false,
    columns: [
      {
        title: "序号",
        key: "",
        dataIndex: "",
        render: (v, item, index) => {
          return index;
        },
        align: "center",
      },
      {
        title: "标题",
        dataIndex: "title",
        key: "title",
        render: (v, item, index) => {
          return v;
        },
        align: "center",
      },
      {
        title: "头像",
        dataIndex: "avatar",
        key: "avatar",
        render: (v, item, index) => {
          return <Avatar src={v.replace(/public/, baseURL)} />;
        },
        align: "center",
      },
      {
        title: "发布者",
        dataIndex: "username",
        key: "username",
        render: (v, item, index) => {
          return v;
        },
        align: "center",
      },
      {
        title: "起始时间",
        dataIndex: "startTime",
        key: "startTime",
        render: (v, item, index) => {
          return moment(v).format("YYYY-MM-DD");
        },
        align: "center",
      },
      {
        title: "结束时间",
        dataIndex: "endTime",
        key: "endTime",
        render: (v, item, index) => {
          return moment(v).format("YYYY-MM-DD");
        },
        align: "center",
      },
      {
        title: "内容",
        dataIndex: "content",
        key: "content",

        render: (v, item, index) => {
          return v;
        },
        align: "center",
      },
      {
        title: "类型",
        dataIndex: "type",
        key: "type",
        render: (v, item, index) => {
          return v;
        },
        align: "center",
      },
      {
        title: "操作",
        render: (v, item, index) => {
          {
            {
              return (
                <div>
                  <Button
                    onClick={() => this.showUpdateModal(item)}
                    style={{ marginRight: 10 }}
                    type="primary"
                    size="small"
                  >
                    修改
                  </Button>

                  <Popconfirm
                    title="你真的要删除吗?"
                    onConfirm={() => this.delconfirm(item)}
                    okText="确定"
                    cancelText="取消"
                  >
                    <Button type="danger" size="small">
                      删除
                    </Button>
                  </Popconfirm>
                </div>
              );
            }
          }
        },
        align: "center",
      },
    ],
    componentSize: "default",
  };
  //修改公告
  showUpdateModal = (item) => {
    this.setState({
      updateVisible: true,
      item: item,
    });
    setTimeout(() => {
      this.updateform.setFieldsValue(item);
    });
  };
  //删除
  delconfirm = (item) => {
    // console.log(item);
    http
      .announceDelete({
        _id: item._id,
      })
      .then((res) => {});
  };
  //确认修改
  updatehandleOk = () => {
    this.updateform.validateFields().then((value) => {
      http
        .updateAnnounce({
          _id: this.state.item._id,
          ...value,
        })
        .then((res) => {
          //   console.log(res);
          if (res.data.code == 200) {
            this.setState({
              updateVisible: false,
            });
            this.updateform.resetFields();
            http.announceList().then((res) => {
              //   console.log(res);
              this.setState({
                annoList: res.data.val,
              });
            });
          }
        });
    });
  };

  //取消修改
  updatehandleCancel = () => {
    this.setState({
      updateVisible: false,
    });
  };

  componentDidMount() {
    http.announceList().then((res) => {
      if (res.data.code == 200) {
        this.setState({
          annoList: res.data.val,
        });
      }
    });
  }
  render() {
    const { annoList, columns, updateVisible, componentSize } = this.state;
    return (
      <div>
        <h1>公告列表</h1>
        {annoList && (
          <Table
            columns={columns}
            dataSource={annoList}
            style={{ marginTop: 10, width: "100%" }}
            bordered
            size="small"
            id="mytable"
            rowKey={(item) => item._id}
            pagination={{ pageSize: 10 }}
          />
        )}
        <Modal
          title="修改公告"
          visible={updateVisible}
          onOk={this.updatehandleOk}
          onCancel={this.updatehandleCancel}
        >
          <Form
            labelCol={{
              span: 4,
            }}
            wrapperCol={{
              span: 14,
            }}
            layout="horizontal"
            initialValues={{
              size: componentSize,
            }}
            ref={(el) => (this.updateform = el)}
            size={componentSize}
          >
            <Form.Item label="标题" name="title">
              <Input />
            </Form.Item>

            <Form.Item label="公告类型" name="type">
              <TreeSelect
                treeData={[
                  {
                    title: "紧急公告",
                    value: "紧急公告",
                  },
                  {
                    title: "重要公告",
                    value: 1,
                  },
                  {
                    title: "普通公告",
                    value: "普通公告",
                  },
                ]}
              />
            </Form.Item>
            <Form.Item label="起始时间" name="times">
              <DatePicker.RangePicker style={{ width: "70%" }} />
            </Form.Item>

            <Form.Item label="公告内容" name="content">
              <TextArea showCount maxLength={150} />
            </Form.Item>
            <Form.Item label="仅管理员" name="isAnnon">
              <Switch />
            </Form.Item>
          </Form>
        </Modal>
      </div>
    );
  }
}
